let omg = document.querySelector("#oImg"),
  oBtns = document.querySelectorAll("input"),
  oSpan = document.querySelectorAll("span");
class Banner {
  constructor(t, i, s, e) {
    (this.index = 0),
      (this.oImg = t),
      (this.oBtnPrev = i),
      (this.oBtnNext = s),
      (this.oLis = e),
      (this.oImg.style.backgroundImage = `url(../img/${this.index}.jpg)`),
      (this.oLis[this.index].style.backgroundColor = "#00000066");
  }
  setBgImg() {
    this.oImg.style.backgroundImage = `url(../img/${this.index}.jpg)`;
  }
  setBgcLis() {
    for (let t = 0; t < this.oLis.length; t++)
      this.index == t
        ? (this.oLis[t].style.backgroundColor = "#fff")
        : (this.oLis[t].style.backgroundColor = "#00000066");
  }
  next() {
    this.index++,
      this.index == this.oLis.length && (this.index = 0),
      this.setBgImg(),
      this.setBgcLis();
  }
  Prev() {
    this.index--,
      -1 == this.index && (this.index = this.oLis.length - 1),
      this.setBgImg(),
      this.setBgcLis();
  }
  clickLi() {
    let i = this;
    for (let t = 0; t < this.oLis.length; t++)
      this.oLis[t].onclick = function () {
        (i.index = t), i.setBgImg(), i.setBgcLis();
      };
  }
  autoPlay() {
    let t = this;
    t.time = setInterval(function () {
      t.next();
    }, 1e3);
  }
  autostop() {
    let t = this;
    (this.oImg.onmouseover = function () {
      clearInterval(t.time);
    }),
      (this.oImg.onmouseout = function () {
        t.autoPlay();
      });
  }
  eventBind() {
    let t = this;
    (this.oBtnNext.onclick = function () {
      t.next();
    }),
      (this.oBtnPrev.onclick = function () {
        t.Prev();
      }),
      this.clickLi(),
      this.autoPlay(),
      this.autostop();
  }
}
let b = new Banner(omg, oBtns[0], oBtns[1], oSpan);
b.eventBind();
